<template>
	<view class="container">
		<!-- 快递信息卡片 -->
		<view class="express-card">
			<view class="express-header">
				<view class="express-company">
					<text class="company-name">{{ expressName || '快递信息' }}</text>
					<text class="express-no">运单号：{{ expressNo || '-' }}</text>
				</view>
				<view class="express-status">
					<text class="status-text" :class="getStatusClass[currentStatus]">{{ currentStatusText }}</text>
				</view>
			</view>
		</view>

		<!-- 物流时间轴 -->
		<view class="timeline-card">
			<view class="timeline-header">
				<text class="header-title">物流跟踪</text>
			</view>

			<!-- 固定状态信息 -->
			<view class="fixed-status" v-if="showFixedStatus">
				<view class="timeline-item" :class="{'first-item': true}">
					<view class="timeline-left">
						<view class="time-info">
							<text class="date">{{ fixedStatusDate }}</text>
							<text class="time">{{ fixedStatusTime }}</text>
							<text class="week">{{ fixedStatusWeek }}</text>
						</view>
					</view>
					<view class="timeline-middle">
						<view class="timeline-icon" :class="getFixedStatusClass">
							<uv-icon :name="getFixedStatusIcon()" color="#ffffff" size="18"></uv-icon>
						</view>
						<view class="timeline-line"></view>
					</view>
					<view class="timeline-right">
						<view class="status-content">
							<text class="status-title">{{ fixedStatusTitle }}</text>
							<text class="status-desc">{{ fixedStatusDesc }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 物流时间轴列表 -->
			<view class="timeline-list" v-if="expressList.length > 0">
				<view class="timeline-item" v-for="(item, index) in expressList" :key="index"
					:class="{'first-item': index === 0, 'last-item': index === expressList.length - 1}">
					<view class="timeline-left">
						<view class="time-info">
							<text class="date">{{ formatDate(item.time) }}</text>
							<text class="time">{{ formatTime(item.time) }}</text>
							<text class="week">{{ item.week }}</text>
						</view>
					</view>
					<view class="timeline-middle">
						<view class="timeline-icon" :class="getStatusIconClass[item.status]">
							<uv-icon :name="getStatusIcon(item.status)" color="#ffffff" size="18"></uv-icon>
						</view>
						<view class="timeline-line" v-if="index !== expressList.length - 1"></view>
					</view>
					<view class="timeline-right">
						<view class="status-content">
							<text class="status-title"
								v-if="item.status && item.status !== '在途'">{{ item.status }}</text>
							<text class="status-desc">{{ item.context }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-else-if="!showFixedStatus">
				<uv-icon name="file-text" color="#ccc" size="60"></uv-icon>
				<text class="empty-text">暂无物流信息</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: '',
				orderData: null,
				expressList: [],
				weekDays: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
			};
		},
		computed: {
			// 快递信息
			expressName() {
				return this.orderData && this.orderData.order ? this.orderData.order.express_name : '';
			},
			expressNo() {
				return this.orderData && this.orderData.order ? this.orderData.order.express_no : '';
			},
			orderState() {
				return this.orderData && this.orderData.order ? this.orderData.order.state : 0;
			},

			// 当前状态
			currentStatus() {
				if (this.expressList.length > 0) {
					return this.expressList[0].status || '在途';
				}
				return this.getStateStatus(this.orderState);
			},
			currentStatusText() {
				const statusMap = {
					'在途': '运输中',
					'揽收': '已揽收',
					'疑难': '疑难件',
					'签收': '已签收',
					'退签': '已退签',
					'派件': '派件中',
					'退回': '已退回',
					'转投': '转投中'
				};
				return statusMap[this.currentStatus] || this.currentStatus;
			},

			// 是否显示固定状态
			showFixedStatus() {
				return this.expressList.length === 0 && this.orderState >= 1;
			},

			// 固定状态信息
			fixedStatusDate() {
				if (this.orderState === 1) {
					return this.formatDate(this.orderData.order.createtime * 1000);
				} else if (this.orderState === 2) {
					return this.formatDate(this.orderData.order.paymenttime * 1000);
				} else if (this.orderState === 3) {
					return this.formatDate(this.orderData.order.delivertime * 1000);
				}
				return '';
			},
			fixedStatusTime() {
				if (this.orderState === 1) {
					return this.formatTime(this.orderData.order.createtime * 1000);
				} else if (this.orderState === 2) {
					return this.formatTime(this.orderData.order.paymenttime * 1000);
				} else if (this.orderState === 3) {
					return this.formatTime(this.orderData.order.delivertime * 1000);
				}
				return '';
			},
			fixedStatusWeek() {
				if (this.orderState === 1) {
					return this.getWeekDay(this.orderData.order.createtime * 1000);
				} else if (this.orderState === 2) {
					return this.getWeekDay(this.orderData.order.paymenttime * 1000);
				} else if (this.orderState === 3) {
					return this.getWeekDay(this.orderData.order.delivertime * 1000);
				}
				return '';
			},
			fixedStatusTitle() {
				const statusMap = {
					'1': '尚未付款',
					'2': '已付款',
					'3': '已发货'
				};
				return statusMap[this.orderState] || '';
			},
			fixedStatusDesc() {
				const descMap = {
					'1': '付款后，即可将宝贝发出',
					'2': '商家正在处理订单',
					'3': '包裹正在等待快递小哥揽收~'
				};
				return descMap[this.orderState] || '';
			}
		},
		onLoad(option) {
			if (option.order_id) {
				this.orderId = option.order_id;
				this.loadData(option.order_id);
			} else {
				this.$wanlshop.msg('参数错误');
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		},
		methods: {
			async loadData(order_id) {
				try {
					const res = await uni.$uv.http.get('/supplier/getOrderExpress', {
						params: {
							order_id: order_id
						}
					});
					console.log('物流信息:', res);

					if (res.res.code === 1) {
						this.orderData = res.res.data;
						this.expressList = res.res.data.express_list || [];
						this.weekDays = res.res.data.week || this.weekDays;

						// 为物流信息添加星期几
						this.expressList.forEach(item => {
							if (item.time) {
								const date = new Date(item.time);
								item.week = this.weekDays[date.getDay()];
							}
						});
					} else {
						this.$wanlshop.msg(res.res.msg || '获取物流信息失败');
					}
				} catch (error) {
					console.error('获取物流信息失败:', error);
					this.$wanlshop.msg('获取失败，请稍后重试');
				}
			},

			// 格式化日期
			formatDate(timestamp) {
				if (!timestamp) return '-';
				const date = new Date(timestamp);
				return `${date.getFullYear()}.${this.padZero(date.getMonth() + 1)}.${this.padZero(date.getDate())}`;
			},

			// 格式化时间
			formatTime(timestamp) {
				if (!timestamp) return '-';
				const date = new Date(timestamp);
				return `${this.padZero(date.getHours())}:${this.padZero(date.getMinutes())}`;
			},

			// 获取星期几
			getWeekDay(timestamp) {
				if (!timestamp) return '';
				const date = new Date(timestamp);
				return this.weekDays[date.getDay()];
			},

			// 补零
			padZero(num) {
				return num < 10 ? '0' + num : num;
			},

			// 根据订单状态获取状态
			getStateStatus(state) {
				const statusMap = {
					'1': '在途',
					'2': '在途',
					'3': '在途'
				};
				return statusMap[state] || '在途';
			},

			// 获取状态样式类
			getStatusClass(status) {
				const classMap = {
					'签收': 'status-success',
					'疑难': 'status-warning',
					'退回': 'status-error',
					'退签': 'status-error'
				};
				return classMap[status] || 'status-default';
			},

			// 获取固定状态样式类
			getFixedStatusClass() {
				const classMap = {
					'1': 'icon-waiting',
					'2': 'icon-paid',
					'3': 'icon-shipped'
				};
				return classMap[this.orderState] || 'icon-default';
			},

			// 获取固定状态图标
			getFixedStatusIcon() {
				const iconMap = {
					'1': 'creditcard', // 待付款
					'2': 'cart', // 已付款
					'3': 'truck' // 已发货
				};
				return iconMap[this.orderState] || 'help';
			},

			// 获取物流状态图标样式类
			getStatusIconClass(status) {
				const classMap = {
					'在途': 'icon-transit',
					'揽收': 'icon-collect',
					'疑难': 'icon-problem',
					'签收': 'icon-signed',
					'退签': 'icon-return',
					'派件': 'icon-delivery',
					'退回': 'icon-returned',
					'转投': 'icon-forward'
				};
				return classMap[status] || 'icon-default';
			},

			// 获取物流状态图标
			getStatusIcon(status) {
				const iconMap = {
					'在途': 'arrow-up',
					'揽收': 'archive',
					'疑难': 'warning',
					'签收': 'checkmark',
					'退签': 'reply',
					'派件': 'person',
					'退回': 'hand-down',
					'转投': 'share'
				};
				return iconMap[status] || 'help';
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #f8f9fa;
		min-height: 100vh;
	}

	/* 快递信息卡片 */
	.express-card {
		background: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.express-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.express-company {
		display: flex;
		flex-direction: column;
	}

	.company-name {
		font-size: 32rpx;
		color: #333;
		font-weight: 600;
		margin-bottom: 8rpx;
	}

	.express-no {
		font-size: 24rpx;
		color: #666;
	}

	.express-status {
		.status-text {
			font-size: 24rpx;
			padding: 8rpx 16rpx;
			border-radius: 20rpx;

			&.status-success {
				color: #52c41a;
				background: rgba(82, 196, 26, 0.1);
			}

			&.status-warning {
				color: #fa8c16;
				background: rgba(250, 140, 22, 0.1);
			}

			&.status-error {
				color: #ff4d4f;
				background: rgba(255, 77, 79, 0.1);
			}

			&.status-default {
				color: #1890ff;
				background: rgba(24, 144, 255, 0.1);
			}
		}
	}

	/* 时间轴卡片 */
	.timeline-card {
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		min-height: 80vh;
	}

	.timeline-header {
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.header-title {
		font-size: 28rpx;
		color: #333;
		font-weight: 600;
	}

	/* 时间轴样式 */
	.timeline-list,
	.fixed-status {
		padding: 0 30rpx;
	}

	.timeline-item {
		display: flex;
		padding: 30rpx 0;
		position: relative;

		&.first-item {
			padding-top: 40rpx;
		}

		&.last-item {
			padding-bottom: 40rpx;
		}
	}

	.timeline-left {
		width: 160rpx;
		flex-shrink: 0;
	}

	.time-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.date {
		font-size: 24rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 4rpx;
	}

	.time {
		font-size: 20rpx;
		color: #666;
		margin-bottom: 4rpx;
	}

	.week {
		font-size: 18rpx;
		color: #999;
	}

	.timeline-middle {
		width: 60rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.timeline-icon {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 2;
		position: relative;

		&.icon-transit {
			background: #1890ff;
		}

		&.icon-collect {
			background: #52c41a;
		}

		&.icon-problem {
			background: #fa8c16;
		}

		&.icon-signed {
			background: #52c41a;
		}

		&.icon-return {
			background: #ff4d4f;
		}

		&.icon-delivery {
			background: #722ed1;
		}

		&.icon-returned {
			background: #ff4d4f;
		}

		&.icon-forward {
			background: #13c2c2;
		}

		&.icon-waiting {
			background: #fa8c16;
		}

		&.icon-paid {
			background: #1890ff;
		}

		&.icon-shipped {
			background: #52c41a;
		}

		&.icon-default {
			background: #666;
		}
	}

	.timeline-line {
		flex: 1;
		width: 2rpx;
		background: #e8e8e8;
		margin-top: 8rpx;
	}

	.timeline-right {
		flex: 1;
		padding-left: 30rpx;
	}

	.status-content {
		display: flex;
		flex-direction: column;
	}

	.status-title {
		font-size: 26rpx;
		color: #333;
		font-weight: 600;
		margin-bottom: 8rpx;
	}

	.status-desc {
		font-size: 24rpx;
		color: #666;
		line-height: 1.5;
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
	}

	.empty-text {
		font-size: 26rpx;
		color: #999;
		margin-top: 20rpx;
	}

	/* 响应式调整 */
	@media (max-width: 750px) {
		.express-card {
			padding: 25rpx;
		}

		.timeline-header {
			padding: 25rpx;
		}

		.timeline-list,
		.fixed-status {
			padding: 0 25rpx;
		}

		.timeline-left {
			width: 140rpx;
		}

		.timeline-right {
			padding-left: 25rpx;
		}
	}
</style>